<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信盈达教务管理系统</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .login-box{
            width: 400px;
            height: 250px;
            position: fixed;
            top: 20%;
            left: 50%;
            margin-left: -200px;
            background-color: white;
            border: cornflowerblue solid 1px;
        }
        .bar{
            height: 30px;
            width: 100%;
            background-color: cornflowerblue;
            line-height: 30px;
        }
        form{
            margin-top: 10px;
            margin-left: 8%;
            line-height: 30px;
        }
        .input-text{
            width: 90%;
            height: 25px;
        }
        .err{
            margin-left: 10px;
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="login-box">
        <div class="bar">
            <span style="margin-left: 135px">欢迎登录信盈达教务系统</span>
        </div>
        <form action="/login/" method="post">
            <span>用户名：<i id="usr_err_info" class="err">{{ errinfo }}</i></span><br/>
            <input class="input-text" type="text" name="usr"/><br/>
            <span>密码：<i id="pwd_err_info" class="err"></i></span><br/>
            <input class="input-text" type="password" name="pwd"/><br/>
            <span style="font-size: 16px"><input class="id" type="radio" name="id" value="1" style="margin-left: 15%;"/>老师</span>
            <span style="font-size: 16px"><input class="id" type="radio" name="id" value="2" style="margin-left: 15%;"/>学生</span>
            <span style="font-size: 16px"><input class="id" type="radio" name="id" value="3" style="margin-left: 15%;"/>管理员</span>
            <i id="id_err_info" class="err"></i><br/>
            <input id="submit" type="submit" value="登录"  style="width: 20%;height: 25px;margin-left: 35%"/>
            {% csrf_token %}
        </form>
    </div>
    <script>
        {# var idSelected = false; #}
        var pat1 =/^[a-z_]\w{3,19}$/i;
        var pat2 = /^\S{6,16}$/;
        document.getElementById('submit').onclick = function (event) {
            if (usr.value.search(pat1) > 0){
                usrlen = document.getElementsByName('usr')[0].value.length;
                if (usrlen <= 0 || usrlen >= 20){
                    document.getElementById('usr_err_info').innerText = '用户名必须为20个以内有效字符';
                    event.preventDefault(); {# 阻止默认事件 #}
                }
             }

            if (pwd.value.search(pat2) > 0){
                pwdlen = document.getElementsByName('pwd')[0].value.length;
                if (pwdlen <= 7 || pwdlen > 16){
                    document.getElementById('pwd_err_info').innerText = '请输入密码';
                    event.preventDefault();
                }
             }

            {#if (!idSelected){#}
            {#    document.getElementById('id_err_info').innerText = '请选择你的身份';#}
            {#    event.preventDefault();#}
            {# }#}

            if (!checkedbox()){
                document.getElementById('id_err_info').innerText = '请选择你的身份';
                event.preventDefault();
            }
        };

        var usr = document.getElementsByName('usr')[0];
        usr.onfocus = function (event) {
            document.getElementById('usr_err_info').innerText = '';
        };
        usr.onblur = function (event) {
            if (usr.value.search(pat1) < 0){
                usrlen = document.getElementsByName('usr')[0].value.length;
                if (usrlen <= 0 || usrlen >= 20){
                    document.getElementById('usr_err_info').innerText = '用户名必须为20个以内有效字符';
                    event.preventDefault(); {# 阻止默认事件 #}
                }
                else{
                    document.getElementById('usr_err_info').innerText = "用户名不能以数字和空格开头";
                    event.preventDefault();
                }
            }
        };
        var pwd = document.getElementsByName('pwd')[0];
        pwd.onfocus = function (event) {
            document.getElementById('pwd_err_info').innerText = '';
        };
        pwd.onblur = function (event) {
            if (pwd.value.search(pat2) < 0){
                pwdlen = document.getElementsByName('pwd')[0].value.length;
                if (pwdlen < 5 || pwdlen > 16){
                    document.getElementById('pwd_err_info').innerText = '输入的密码位数错误';
                    event.preventDefault();
                }
                else{
                    document.getElementById('pwd_err_info').innerText = '输入的密码不能含有空白字符';
                    event.preventDefault();
                }
            }
        };

        {#var ids = document.getElementsByClassName('id');#}
        {#for (i in ids){#}
        {#    ids[i].onchange=function (event) {#}
        {#        idSelected = true;#}
        {#        document.getElementById('id_err_info').innerText = '';#}
        {#    }#}
        {# }#}

        function checkedbox() {
            var ids = document.getElementsByClassName('id');
            for (i in ids){
                if (ids[i].checked){
                    idSelected = true;
                    document.getElementById('id_err_info').innerText = '';
                    return true;
                }
            }
            return false
        }


    </script>
</body>
</html>